<template>
  <div class="reg-box">
    <p class="close">×</p>
    <div class="content-box">
      <h3>注册账号</h3>
      <div class="phone-num">
        <div class="phone-pass">邮箱</div>
        <input
          type="text"
          @blur="testname"
          placeholder="输入邮箱"
          class="username"
          v-model="username"
        />
        <!-- <span>{{ msg }}</span> -->
      </div>
      <div class="pwd">
        <div class="phone-pass">验证码</div>

        <input
          type="password"
          placeholder="请输入验证码"
          class="userpwd"
          v-model="userpass"
        />
      <button class="sendpass" @click="sendPass">发送验证码</button>
      </div>
      <div class="pwd">
        <div class="phone-pass">密码</div>

        <input
          type="password"
          @blur="testpass"
          placeholder="请设置密码"
          class="userpwd"
          v-model="userpass2"
        />
      </div>
      <div class="agree">
        <input type="checkbox" class="input001" />
        已阅读并同意
        <a href="">《用户协议》</a>
        <a href="">《隐私政策》</a>
        <a href="">《买家须知》</a>。
      </div>
      <button @click="checkUser" class="check">注册</button>
    </div>
  </div>
</template>

<script>
import mouth from "../../public/utils/mouth";
export default {
  name: "Reg",
  data() {
    return {
      username: "",
      userpass: "",
      userpass2: "",
      testName: false,
      testPass: false,
      testSend:false,
    };
  },
  methods: {
    testname() {
      let user = new RegExp(
        /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
      );
      this.testName = user.test(this.username);
      console.log(this.testName);
    },
    testpass() {
      let pass = new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/);
      this.testPass = pass.test(this.userpass2);
      console.log(this.testPass);
    },
    sendPass(){
     if(tihs.testName){
      mouth({
        url:"",
        method:"post",
        params:{

        }.then(res=>{

        }).catch(err=>{

        })
      })
     }
    },
    checkUser() {
      if (this.testName && this.testPass && this.testSend) {
        mouth({
          // url: "/user/login",
          // url:"/vips",
          methods: "post",
           data:`username=${this.username}&userpass=${this.userpass2}`
          // params:{
          //   username : this.username,
          //   userpass : this.userpass2
          // }
          // data: `name=${this.username}&pass=${this.userpass2}`,
        })
          .then((res) => {
            console.log(res.data);
            alert("注册成功");
            window.localStorage.setItem("username",this.username);
            this.$router.push("/home");
          })
          .catch((err) => {
            alert("注册失败");
          });
      } else {
        alert("账号或密码输入错误");
      }
      // mouth.post(
      //     "http://10.12.159.36:8081/user/login?name=1223634698@qq.com&pass=123456",{
      //        params: {
      //         name:this.username,
      //          pass: this.userpass2
      //        },
      //     })
      //   .then((res) => {
      //     console.log("res.data", res.data);
      //   })
      //   .catch((err) => {
      //     console.log("出错了", err);
      //   });
    },
  },
};
</script>

<style scoped>
.reg-box {
  width: 100%;
  margin-top: 0.33rem;
}
.sendpass{
  width: 0.6rem;
  height: 0.36rem;
  font-size: 00.12rem;
  border: none;
  outline: none;
  background-color:white;
  right: 0;
  position: absolute;
}
.close {
  width: 100%;
  box-sizing: border-box;
  padding-left: 0.17rem;
  font-size: 0.3rem;
}

.content-box {
  width: 100%;
  padding: 0 0.36rem;
  box-sizing: border-box;
}

.content-box h3 {
  margin: 1.06rem 0 0.6rem 0;
  font-size: 0.22rem;
  text-align: center;
}

.phone-num,
.pwd {
  width: 100%;
  height: 0.42rem;
  line-height: 0.42rem;
  border-bottom: 1px solid #f8f8f8;
  margin-bottom: 0.28rem;
  font-size: 0.12rem;
  display: flex;
  position: relative;
}

.phone-pass {
  width: 0.5rem;
}
.username,
.userpwd {
  border: none;
  outline: none;
  padding-left: 0.27rem;
  font-size: 0.18rem;
}

input::-webkit-input-placeholder {
  color: #dedde5;
  font-size: 0.12rem;
}

.agree {
  font-size: 0.08rem;
  color: #b6b5bb;
}
.agree input {
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  margin-bottom: 0.2rem;
}

.input001[type="checkbox"] {
  cursor: pointer;
  position: relative;
  width: 0.2rem;
  height: 0.2rem;
  font-size: 0.24rem;
  visibility: hidden;
  margin-top: 0.14rem;
  margin-left: 0.05rem;
}
.input001[type="checkbox"]::after {
  position: absolute;
  top: 0;
  background-color: #fff;
  color: #fff;
  border: 1px solid #b1b1b1;
  width: 0.2rem;
  height: 0.2rem;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 50%;
  box-sizing: border-box;
}
.input001[type="checkbox"]:checked::after {
  background-color: #ad864d;
  border: none;
  content: "\2713";
  font-size: 0.14rem;
  font-weight: bold;
  color: black;
}

.check {
  width: 100%;
  height: 0.44rem;
  background-color: #abaaba;
  color: #bdbccb;
  border: none;
}
</style>